<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>uAdmin - Professional, Responsive and Flat Admin Template</title>
<meta name="description" content="uAdmin is a Professional, Responsive and Flat Admin Template created by pixelcave and published on Themeforest" />
<meta name="author" content="pixelcave" />
<meta name="robots" content="index, follow" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="shortcut icon" href="img/favicon.ico" />
<link rel="apple-touch-icon" href="img/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="57x57" href="img/apple-touch-icon-57x57-precomposed.png" />
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-precomposed.png" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic" />       
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/plugins.css" />
<link rel="stylesheet" href="css/main.css" />
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<div id="page-container">
<header class="navbar navbar-inverse">
<div class="navbar-inner remove-radius remove-box-shadow">
<div class="container-fluid">
<ul class="nav pull-right visible-phone visible-tablet">
<li class="divider-vertical remove-margin"></li>
<li>
<a href="javascript:void(0)" data-toggle="collapse" data-target=".nav-collapse">
<i class="icon-reorder"></i>
</a>
</li>
</ul>
<a href="index.php" class="brand"><img src="img/template/logo.png" alt="logo" /></a>
<div id="loading" class="hide pull-left"><i class="icon-certificate icon-spin"></i></div>
<ul id="widgets" class="nav pull-right">
<li class="divider-vertical remove-margin"></li>
<li id="rss-widget" class="dropdown dropdown-left-responsive">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-rss"></i>
<span class="badge badge-warning display-none"></span>
</a>
<ul class="dropdown-menu widget widget-fluid">
<li class="widget-heading text-center">Web Design</li>
<li class="li-hover"><a href="javascript:void(0)" class="widget-link"><i class="icon-umbrella"></i>This is a headline</a></li>
<li class="divider"></li>
<li class="li-hover"><a href="javascript:void(0)" class="widget-link"><i class="icon-trophy"></i>Another headline</a></li>
<li class="divider"></li>
<li class="li-hover"><a href="javascript:void(0)" class="widget-link"><i class="icon-suitcase"></i>Headlines keep coming!</a></li>
<li class="widget-heading text-center">Web Developent</li>
<li class="li-hover"><a href="javascript:void(0)" class="widget-link"><i class="icon-phone"></i>New headline</a></li>
<li class="divider"></li>
<li class="li-hover"><a href="javascript:void(0)" class="widget-link"><i class="icon-pencil"></i>Another one</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)" class="text-center">All News</a></li>
</ul>
</li>
<li class="divider-vertical remove-margin"></li>
<li id="twitter-widget" class="dropdown dropdown-left-responsive">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-twitter"></i>
<span class="badge badge-info display-none"></span>
</a>
<ul class="dropdown-menu widget">
<li class="widget-heading"><i class="icon-comments-alt pull-right"></i>Latest Tweets</li>
<li class="li-hover">
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_dark_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">Michael</a><span class="label label-info">just now</span></h6>
<div class="media">Web design all the way!</div>
</div>
</div>
</li>
<li class="divider"></li>
<li class="li-hover">
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_dark_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">Monica</a><span class="label label-info">3 min ago</span></h6>
<div class="media">Download free PSDs at <a href="http://bit.ly/YUs4SQ" target="_blank">http://bit.ly/YUs4SQ</a></div>
</div>
</div>
</li>
<li class="divider"></li>
<li class="li-hover">
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_dark_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">Steven</a><span class="label label-info">45 min ago</span></h6>
<div class="media">Be sure to check out my portfolio!</div>
</div>
</div>
</li>
<li class="divider"></li>
<li class="li-hover">
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_dark_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">Tim</a><span class="label label-info">1 hour ago</span></h6>
<div class="media">Get all our themes for free for the next 2 hours! <a href="javascript:void(0)">#freebies</a></div>
</div>
</div>
</li>
</ul>
</li>
<li class="divider-vertical remove-margin"></li>
<li id="messages-widget" class="dropdown dropdown-left-responsive">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-envelope"></i>
<span class="badge badge-success">1</span>
</a>
<ul class="dropdown-menu widget pull-right">
<li class="widget-heading"><i class="icon-comment pull-right"></i>Latest Messages</li>
<li class="new-on">
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_light_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">George</a><span class="label label-success">2 min ago</span></h6>
<div class="media">Thanks for your help! The tutorial really helped me a lot!</div>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_light_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">Mike</a><span class="label">6 hours ago</span></h6>
<div class="media">The logo is ready, have a look and let me know what you think!</div>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_light_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">Julia</a><span class="label">1 day ago</span></h6>
<div class="media">We should better consider our social media marketing strategy!</div>
</div>
</div>
</li>
<li class="divider"></li>
<li class="text-center"><a href="javascript:void(0)">View All Messages</a></li>
</ul>
</li>
<li class="divider-vertical remove-margin"></li>
<li id="notifications-widget" class="dropdown dropdown-center-responsive">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-flag"></i>
<span class="badge badge-important">1</span>
<span class="badge badge-warning">2</span>
</a>
<ul class="dropdown-menu widget">
<li class="widget-heading"><a href="javascript:void(0)" class="pull-right widget-link"><i class="icon-cog"></i></a><a href="javascript:void(0)" class="widget-link">System</a></li>
<li>
<ul>
<li class="label label-important">20 min ago</li>
<li class="text-error">Support system is down for maintenance!</li>
</ul>
</li>
<li>
<ul>
<li class="label label-warning">3 hours ago</li>
<li class="text-warning">PHP upgrade started!</li>
</ul>
</li>
<li>
<ul>
<li class="label label-warning">5 hours ago</li>
<li class="text-warning"><a href="javascript:void(0)" class="widget-link">1 support ticket</a> just opened!</li>
</ul>
</li>
<li class="widget-heading"><a href="javascript:void(0)" class="pull-right widget-link"><i class="icon-bookmark"></i></a><a href="javascript:void(0)" class="widget-link">Project #3</a></li>
<li>
<ul>
<li class="label label-success">3 weeks ago</li>
<li class="text-success">Project #3 <a href="javascript:void(0)" class="widget-link">published</a> successfully!</li>
</ul>
</li>
<li>
<ul>
<li class="label label-info">1 month ago</li>
<li class="text-info">Milestone #3 achieved!</li>
<li class="text-info"><a href="javascript:void(0)" class="widget-link">John Doe</a> joined the project!</li>
</ul>
</li>
<li>
<ul>
<li class="label">1 year ago</li>
<li class="text-muted">This is an old notification</li>
</ul>
</li>
<li class="divider"></li>
<li class="text-center"><a href="javascript:void(0)">View All Notifications</a></li>
</ul>
</li>
<li class="divider-vertical remove-margin"></li>
<li class="dropdown dropdown-user">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown"><img src="img/template/avatar.png" alt="avatar" /> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="javascript:void(0)" class="loading-on"><i class="icon-refresh"></i> Refresh</a>
</li>
<li class="divider"></li>
<li>
<a href="#modal-user-settings" role="button" data-toggle="modal"><i class="icon-user"></i> User Profile</a>
</li>
<li>
<a href="javascript:void(0)"><i class="icon-wrench"></i> App Settings</a>
</li>
<li class="divider"></li>
<li>
<a href="page_login.php"><i class="icon-lock"></i> Log out</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</header>
<div id="inner-container"><aside id="page-sidebar" class="nav-collapse collapse">
<form id="sidebar-search" method="post" onsubmit="return false;" />
<div class="input-append">
<input type="text" placeholder="Search.." class="remove-box-shadow remove-transition remove-radius" />
<button><i class="icon-search"></i></button>
</div>
</form>
<nav id="primary-nav">
<ul>
<li>
<a href="index.php"><i class="icon-fire"></i>Dashboard</a>
</li>
<li>
<a href="#"><i class="icon-magic"></i>UI Elements</a>
<ul>
<li>
<a href="page_ui_general.php"><i class="icon-star"></i>General</a>
</li>
<li>
<a href="page_forms.php"><i class="icon-th-list"></i>Forms</a>
</li>
<li>
<a href="page_tables.php"><i class="icon-table"></i>Tables</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="icon-leaf"></i>Components</a>
<ul>
<li>
<a href="page_charts.php"><i class="icon-bar-chart"></i>Charts</a>
</li>
<li>
<a href="page_calendar.php"><i class="icon-calendar"></i>Calendar</a>
</li>
<li>
<a href="page_datatables.php"><i class="icon-th"></i>DataTables</a>
</li>
</ul>
</li>
<li>
<a href="page_typography.php" class="active"><i class="icon-font"></i>Typography</a>
</li>
<li>
<a href="page_gallery.php"><i class="icon-picture"></i>Gallery</a>
</li>
<li>
<a href="#"><i class="icon-tint"></i>Icons</a>
<ul>
<li>
<a href="page_fontawesome.php">FontAwesome</a>
</li>
<li>
<a href="page_gemicon.php">Gemicon</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="icon-file-alt"></i>Pages</a>
<ul>
<li>
<a href="page_profile.php">Profile</a>
</li>
<li>
<a href="page_faq.php">Faq</a>
</li>
<li>
<a href="page_errors.php">Errors</a>
</li>
<li>
<a href="page_blank.php">Blank</a>
</li>
</ul>
</li>
<li>
<a href="page_login.php"><i class="icon-off"></i>Login Page</a>
</li>
</ul>
</nav>
</aside><div id="page-content">
<ul id="nav-info" class="clearfix">
<li><a href="index.php"><i class="icon-home"></i></a></li>
<li class="active"><a href="">Typography</a></li>
</ul>
<h3 class="page-header page-header-top">Headings <small>h1, h2, h3, h4, h5, h6</small></h3>
<div class="row-fluid">
<div class="span6">
<h1>h1. Heading 1</h1>
<h2>h2. Heading 2</h2>
<h3>h3. Heading 3</h3>
</div>
<div class="span6">
<h4>h4. Heading 4</h4>
<h5>h5. Heading 5</h5>
<h6>h6. Heading 6</h6>
</div>
</div>
<h3 class="page-header">Content <small>Demo paragraphs, links, labels, badges and more</small></h3>
<div class="row-fluid">
<div class="span6">
<p class="lead">Lead paragraph goes here!</p>
<p><a href="javascript:void(0)">Lorem</a> ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, <strong>justo vel imperdiet gravida</strong>, urna ligula hendrerit nibh, ac cursus nibh sapien in purus. Mauris tincidunt tincidunt turpis in porta. Integer fermentum tincidunt auctor. Vestibulum ullamcorper, odio sed rhoncus imperdiet, enim elit sollicitudin orci, eget dictum leo mi nec lectus. Nam commodo turpis id lectus scelerisque vulputate. Integer sed dolor erat. Fusce erat ipsum, varius vel euismod sed, tristique et lectus? Etiam egestas fringilla enim, id convallis lectus laoreet at. Fusce purus nisi, gravida sed consectetur ut, interdum quis nisi. Quisque egestas nisl id lectus facilisis scelerisque</p>
</div>
<div class="span6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet <a href="javascript:void(0)">gravida</a>, urna ligula hendrerit nibh, ac cursus nibh sapien in purus. Mauris tincidunt tincidunt turpis in porta. Integer fermentum tincidunt auctor. Vestibulum ullamcorper, odio sed rhoncus imperdiet, enim elit sollicitudin orci, eget dictum leo mi nec lectus. Nam commodo turpis id lectus scelerisque vulputate.</p>
<p><em>Integer sed dolor erat. Fusce erat ipsum, varius vel euismod sed, tristique et lectus? Etiam egestas fringilla enim, id convallis lectus laoreet at. Fusce purus nisi, gravida sed consectetur ut, interdum quis nisi. Quisque egestas nisl id lectus facilisis scelerisque? Proin rhoncus dui at ligula vestibulum ut facilisis ante sodales! Suspendisse potenti. Aliquam tincidunt sollicitudin sem nec ultrices. Sed at mi velit.</em></p>
</div>
</div>
<h4>Blockquotes</h4>
<div class="row-fluid">
<div class="span4">
<blockquote>
<p>This is a blockquote with source info</p>
<small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>
</div>
<div class="span4">
<blockquote>
<p>This is the default blockquote</p>
</blockquote>
</div>
<div class="span4">
<blockquote class="pull-right">
<p>This is a blockquote pulled right</p>
<small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel <strong>imperdiet gravida</strong>, urna <a href="javascript:void(0)">ligula</a> hendrerit nibh, ac cursus nibh sapien in purus. Mauris tincidunt tincidunt turpis in porta. Integer fermentum tincidunt auctor. Vestibulum ullamcorper, odio sed rhoncus imperdiet, enim elit sollicitudin orci, eget dictum leo mi nec lectus. Nam commodo turpis id lectus scelerisque vulputate.</p>
<p class="well remove-radius"><strong>Gives the paragraph an inset effect!</strong> <code>.well</code><br />Integer sed dolor erat. Fusce erat ipsum, varius vel euismod sed, tristique et lectus? Etiam egestas fringilla enim, id convallis lectus laoreet at. Fusce purus nisi, gravida sed consectetur ut, interdum quis nisi. Quisque egestas nisl id lectus facilisis scelerisque? Proin rhoncus dui at ligula vestibulum ut facilisis ante sodales! Suspendisse potenti. Aliquam tincidunt sollicitudin sem nec ultrices. Sed at mi velit. Ut egestas tempor est, in cursus enim venenatis eget! Nulla quis ligula ipsum. Donec vitae ultrices dolor?</p>
<div class="row-fluid">
<div class="span4">
<h4>Labels</h4>
<table class="table table-hover">
<thead>
<tr>
<th>Classes</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.label</code></td>
<td><span class="label">Default</span></td>
</tr>
<tr>
<td><code>.label</code> <code>.label-success</code></td>
<td><span class="label label-success">Success</span></td>
</tr>
<tr>
<td><code>.label</code> <code>.label-important</code></td>
<td><span class="label label-important">Important</span></td>
</tr>
<tr>
<td><code>.label</code> <code>.label-warning</code></td>
<td><span class="label label-warning">Warning</span></td>
</tr>
<tr>
<td><code>.label</code> <code>.label-info</code></td>
<td><span class="label label-info">Information</span></td>
</tr>
<tr>
<td><code>.label</code> <code>.label-inverse</code></td>
<td><span class="label label-inverse">Inverse</span></td>
</tr>
</tbody>
</table>
</div>
<div class="span4">
<h4>Badges</h4>
<table class="table table-hover">
<thead>
<tr>
<th>Classes</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.badge</code></td>
<td><span class="badge">5</span></td>
</tr>
<tr>
<td><code>.badge</code> <code>.badge-success</code></td>
<td><span class="badge badge-success">1</span></td>
</tr>
<tr>
<td><code>.badge</code> <code>.badge-important</code></td>
<td><span class="badge badge-important">2</span></td>
</tr>
<tr>
<td><code>.badge</code> <code>.badge-warning</code></td>
<td><span class="badge badge-warning">3</span></td>
</tr>
<tr>
<td><code>.badge</code> <code>.badge-info</code></td>
<td><span class="badge badge-info">4</span></td>
</tr>
<tr>
<td><code>.badge</code> <code>.badge-inverse</code></td>
<td><span class="badge badge-inverse">6</span></td>
</tr>
</tbody>
</table>
</div>
<div class="span4">
<h4>Emphasis text</h4>
<table class="table table-hover">
<thead>
<tr>
<th>Class</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.muted</code></td>
<td><span class="muted">Muted!</span></td>
</tr>
<tr>
<td><code>.text-success</code></td>
<td><span class="text-success">Success!</span></td>
</tr>
<tr>
<td><code>.text-error</code></td>
<td><span class="text-error">Important!</span></td>
</tr>
<tr>
<td><code>.text-warning</code></td>
<td><span class="text-warning">Warning!</span></td>
</tr>
<tr>
<td><code>.text-info</code></td>
<td><span class="text-info">Information!</span></td>
</tr>
<tr>
<td><code>.text-black</code></td>
<td><span class="text-black">Text in black color!</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<h3 class="page-header">Common Lists</h3>
<div class="row-fluid">
<div class="span3">
<h4>Unordered</h4>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>
Sublist
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
</li>
<li>Third item</li>
</ul>
</div>
<div class="span3">
<h4>Ordered</h4>
<ol>
<li>First item</li>
<li>Second item</li>
<li>
Sublist
<ol>
</ol></li><li>First item</li>
<li>Second item</li>
<li>Third item</li>


<li>Third item</li>

</ol></div>
<div class="span3">
<h4>Unstyled</h4>
<ul class="unstyled">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>
Sublist
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
</li>
<li>Third item</li>
</ul>
</div>
<div class="span3">
<h4>Icon styled <small>Use any icon and color!</small></h4>
<ul class="icons">
<li><i class="icon-ok text-success"></i>First item</li>
<li><i class="icon-ok text-success"></i>Second item</li>
<li><i class="icon-ok text-success"></i>Third item</li>
<li>
<i class="icon-ok text-success"></i>Sublist
<ul class="icons">
<li><i class="icon-unlock text-warning"></i>First item</li>
<li><i class="icon-pencil text-info"></i>Second item</li>
<li><i class="icon-screenshot text-error"></i>Third item</li>
</ul>
</li>
<li><i class="icon-ok text-success"></i>Third item</li>
</ul>
</div>
</div>
<h3 class="page-header">Description Lists</h3>
<div class="row-fluid">
<div class="span6">
<h4>Default</h4>
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
</div>
<div class="span6">
<h4>Horizontal</h4>
<dl class="dl-horizontal">
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
</div>
</div>
<h3 class="page-header">Grid <small>Fluid grid can be used to create the layout you want</small></h3>
<div class="row-fluid grid-boxes">
<div class="span1"><code>.span1</code></div>
<div class="span1"><code>.span1</code></div>
<div class="span1"><code>.span1</code></div>
<div class="span1"><code>.span1</code></div>
<div class="span1"><code>.span1</code></div>
<div class="span1"><code>.span1</code></div>
<div class="span1"><code>.span1</code></div>
<div class="span1"><code>.span1</code></div>
<div class="span1"><code>.span1</code></div>
<div class="span1"><code>.span1</code></div>
<div class="span1"><code>.span1</code></div>
<div class="span1"><code>.span1</code></div>
</div>
<div class="row-fluid grid-boxes">
<div class="span2"><code>.span2</code></div>
<div class="span2"><code>.span2</code></div>
<div class="span2"><code>.span2</code></div>
<div class="span2"><code>.span2</code></div>
<div class="span2"><code>.span2</code></div>
<div class="span2"><code>.span2</code></div>
</div>
<div class="row-fluid grid-boxes">
<div class="span3"><code>.span3</code></div>
<div class="span3"><code>.span3</code></div>
<div class="span3"><code>.span3</code></div>
<div class="span3"><code>.span3</code></div>
</div>
<div class="row-fluid grid-boxes">
<div class="span4"><code>.span4</code></div>
<div class="span4"><code>.span4</code></div>
<div class="span4"><code>.span4</code></div>
</div>
<div class="row-fluid grid-boxes">
<div class="span6"><code>.span6</code></div>
<div class="span6"><code>.span6</code></div>
</div>
<div class="row-fluid grid-boxes">
<div class="span7"><code>.span7</code></div>
<div class="span5"><code>.span5</code></div>
</div>
<div class="row-fluid grid-boxes">
<div class="span4"><code>.span4</code></div>
<div class="span8"><code>.span8</code></div>
</div>
<div class="row-fluid grid-boxes">
<div class="span9"><code>.span9</code></div>
<div class="span3"><code>.span3</code></div>
</div>
<div class="row-fluid grid-boxes">
<div class="span2"><code>.span2</code></div>
<div class="span10"><code>.span10</code></div>
</div>
<div class="row-fluid grid-boxes">
<div class="span11"><code>.span11</code></div>
<div class="span1"><code>.span1</code></div>
</div>
<div class="row-fluid grid-boxes">
<div class="span12"><code>.span12</code></div>
</div>
</div>
<footer>
<script>var d = new Date(); if (d.getFullYear() === 2013) { document.write('2013'); } else { document.write('2013-' + d.getFullYear()); }</script> &copy; <strong>uAdmin 1.0</strong> - Crafted with <i class="icon-heart"></i> by <strong><a href="http://themeforest.net/user/pixelcave/portfolio?ref=pixelcave" target="_blank">pixelcave</a></strong>
</footer>
</div>
</div>
<a href="#" id="to-top"><i class="icon-chevron-up"></i></a>
<div id="modal-user-settings" class="modal hide">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>Profile Settings</h4>
</div>
<div class="modal-body">
<ul id="example-user-tabs" class="nav nav-tabs">
<li class="active"><a href="#example-user-tabs-account"><i class="icon-cogs"></i> Account</a></li>
<li><a href="#example-user-tabs-profile"><i class="icon-user"></i> Profile</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="example-user-tabs-account">
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Success!</strong> Password changed!
</div>
<form class="form-horizontal" />
<div class="control-group">
<label class="control-label" for="example-user-username">Username</label>
<div class="controls">
<input type="text" id="example-user-username" class="disabled" value="administrator" disabled="" />
<span class="help-block">You can't change your username!</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-pass">Password</label>
<div class="controls">
<input type="password" id="example-user-pass" />
<span class="help-block">if you want to change your password enter your current for confirmation!</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-newpass">New Password</label>
<div class="controls">
<input type="password" id="example-user-newpass" />
</div>
</div>
</form>
</div>
<div class="tab-pane" id="example-user-tabs-profile">
<h5 class="page-header-sub hidden-phone">Image</h5>
<div class="form-horizontal hidden-phone">
<div class="control-group">
<img src="img/placeholders/image_dark_120x120.png" alt="image" />
</div>
<div class="control-group">
<form action="index.php" class="dropzone" />
<div class="fallback">
<input name="file" type="file" />
</div>
</form>
</div>
</div>
<form class="form-horizontal" />
<h5 class="page-header-sub">Details</h5>
<div class="control-group">
<label class="control-label" for="example-user-firstname">Firstname</label>
<div class="controls">
<input type="text" id="example-user-firstname" value="John" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-lastname">Lastname</label>
<div class="controls">
<input type="text" id="example-user-lastname" value="Doe" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-gender">Gender</label>
<div class="controls">
<select id="example-user-gender">
<option />Male
<option />Female
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-birthdate">Birthdate</label>
<div class="controls">
<div class="input-append">
<input type="text" id="example-user-birthdate" class="input-small input-datepicker" />
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-skills">Skills</label>
<div class="controls">
<select id="example-user-skills" multiple="multiple" class="select-chosen">
<option selected="" />html
<option selected="" />css
<option />javascript
<option />php
<option />mysql
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-bio">Bio</label>
<div class="controls">
<textarea id="example-user-bio" class="textarea-elastic" rows="3">Bio Information..</textarea>
</div>
</div>
<h5 class="page-header-sub">Social</h5>
<div class="control-group">
<label class="control-label" for="example-user-fb">Facebook</label>
<div class="controls">
<div class="input-append">
<input type="text" id="example-user-fb" />
<span class="add-on"><i class="icon-facebook"></i></span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-twitter">Twitter</label>
<div class="controls">
<div class="input-append">
<input type="text" id="example-user-twitter" />
<span class="add-on"><i class="icon-twitter"></i></span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-pinterest">Pinterest</label>
<div class="controls">
<div class="input-append">
<input type="text" id="example-user-pinterest" />
<span class="add-on"><i class="icon-pinterest"></i></span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-github">Github</label>
<div class="controls">
<div class="input-append">
<input type="text" id="example-user-github" />
<span class="add-on"><i class="icon-github"></i></span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal"><i class="icon-remove"></i> Close</button>
<button class="btn btn-success"><i class="icon-spinner icon-spin"></i> Save changes</button>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/vendor/jquery-1.8.3.min.js"%3E%3C/script%3E'));</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>